<template>

  <div class="ptBody">
    <el-tree style="width: 260px; max-width: 260px; height: 100%;" :data="TreeData" :default-expand-all="true"
      :props="defaultProps" :highlight-current="true" @node-click="SearchHandle">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <a class="bluea" @click="AddDetailHandle(data)" v-show="data.id != 0"> +数据源 </a>
          </span>
          <span>
            <a class="bluea" @click="DesignHandle(1, data)" v-show="data.id != 0"> 设计 </a>
          </span>
        </span>
      </template>
    </el-tree>

    <el-table class="ptBodyRight" height="500px" :data="PrintDataList" stripe table-layout="auto">
      <!-- 添加行号列 -->
      <el-table-column type="index" label="行号" width="60">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="printTempName" label="模板名" min-width="80"> </el-table-column>
      <el-table-column prop="dataSourceName" label="数据源名" min-width="80"> </el-table-column>
      <el-table-column prop="dataSourceKey" label="属性名" min-width="80"> </el-table-column>
      <el-table-column prop="dataSql" label="sql语句" min-width="80"> </el-table-column>

      <el-table-column align="center">
        <template #header>
          <div class="headstr">
            数据属性
          </div>
        </template>
        <template #default="scope">
          <span>{{ scope.row.single == 1 ? "对象" : "集合" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" min-width="80"> </el-table-column>

      <el-table-column align="center">
        <template #header>
          <div class="headstr">
            操作
          </div>
        </template>
        <template #default="scope">
          <el-button type="primary" size="small" @click="EditHandle(scope.$index, scope.row)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 数据源维护 -->
  <el-dialog v-model="dialogFormVisible" width="700px" title="数据源维护">
    <el-form :model="PrintModel" label-width="100px" label-position="right">
      <el-form-item label="模板名:">
        <el-input v-model="PrintModel.printTempName" :disabled="true" />
      </el-form-item>
      <el-form-item label="数据源名:">
        <el-input v-model="PrintModel.dataSourceName" />
      </el-form-item>
      <el-form-item label="属性名:">
        <div class="flex-row">
          <el-input v-model="PrintModel.dataSourceKey" :min="0" />
          <el-tooltip class="box-item" effect="dark" content="设计界面绑定取值唯一键" placement="right-start">
            <el-icon>
              <InfoFilled />
            </el-icon>
          </el-tooltip>
        </div>
      </el-form-item>
      <el-form-item label="sql语句:">
        <el-input v-model="PrintModel.dataSql" :rows="4" type="textarea" />
      </el-form-item>
      <el-form-item label="属性配置:">
        <el-input v-model="PrintModel.props" :rows="4" type="textarea" :min="0" />
        <el-button type="primary" size="small" @click="PropEditHandle()">测试</el-button>
      </el-form-item>
      <el-form-item label="数据属性:">

        <el-switch v-model="PrintModel.single" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="对象" inactive-text="集合" :active-value="1" :inactive-value="0" />

      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="SaveHandle">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import router from "@/router";
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, getCurrentInstance, watch, onMounted } from "vue";

//组件
import { ElNotification } from "element-plus"
//Api
import { GetPrintTempTree, GetPrintDataListByName, SavePrintDataSource } from "../util/request"

//树配置
const defaultProps = {
  children: 'children',
  label: 'templateName',
}
const TreeData = ref([]);

//----加载树

const LoadTree = () => {
  GetPrintTempTree({}).then(data => {
    TreeData.value = data;

  })
}
//加载列表
function SearchHandle(node) {

  let parm = { TemplateName: node.templateCode };
  GetPrintDataListByName(parm).then((res) => {
    console.log('列表数据')
    console.log(res)
    PrintDataList.value = res;
  });
}
//弹出框
const dialogFormVisible = ref(false);
//添加的实体
const PrintModel = ref({});

//记录数据
const PrintDataList = ref([]);

//模版设计
const DesignHandle = (i, dt) => {

  const c = router.resolve({
    path: "/design",
    query: { reportUrl: dt.templateCode },
  });
  window.open(c.href, "_blank");
}

const IsEdit = ref(false);

//数据源修改

const EditHandle = (i, row) => {
  IsEdit.value = true;
  PrintModel.value = row;
  dialogFormVisible.value = true;
}
//加数据源
const AddDetailHandle = (tempData) => {
  IsEdit.value = false;
  PrintModel.value = {
    "id": "0",
    "printTempName": tempData.templateCode,
    "dataSourceKey": "",
    "dataSourceName": "",
    "dataSql": "",
    "single": 1,
    "sort": 1
  };
  dialogFormVisible.value = true;
}

//编辑属性
const PropEditHandle = () => {
try{
  let pp = JSON.parse(PrintModel.value.props);
    if (PrintModel.value.props && pp) {
      ElNotification({ title: '成功', message: '验证成功', type: 'success'})
    }else ElNotification({ title: '失败', message: '不是正确的json格式', type: 'error',})
  }catch(e){

    ElNotification({ title: '失败', message: '不是正确的json格式', type: 'error'})
  }
}

//保存数据源

const SaveHandle = () => {

  console.log(PrintModel.value);
  SavePrintDataSource(PrintModel.value).then(res => {
    ElNotification({ title: '成功', message: '操作成功', type: 'success', })
    dialogFormVisible.value = false;
  })

}

//挂载完毕
onMounted(() => {
  LoadTree();
})

</script>

<style scoped lang="scss">
.ptBody {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 1px 4px #545c64;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  display: flex;

  .ptBodyRight {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

}

.pageheader {
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  vertical-align: middle;
  align-items: center;
}

.bottomGroup {
  position: fixed;
  z-index: 999;
  bottom: 0px;
  left: 0px;
  width: 100%;
  overflow: hidden;
  background-color: grey;
  color: white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  padding: 20px;
  margin: 0px 2px;
  box-sizing: border-box;
}

.footer-area {
  height: 10px;
}

.box-card {
  padding: 0px;
  margin: 0px;
}

.headstr {
  text-align: center;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

// a标签蓝色，手型
.bluea {
  color: #409EFF;
  cursor: pointer;
}
</style>